<template>
  <!--  -->
  <section class="product">
    <div class="container">
      <div class="row">
        <div class="col-md-4">
          <div class="sr-sidebar bg-light">
            <!-- form -->
            <!-- 
              <div class="sr-txt-title">
              <h2 class="sr-txt-h2">Search</h2>
            </div>
            <div class="search-form">
              <form class="">
                <div class="input-group mb-3">
                  <input
                    type="text"
                    placeholder="Keyword"
                    aria-describedby="button-addon2"
                    v-model="params.search"
                  />
                  <button
                    class="btn btn-outline-secondary"
                    type="button"
                    id="button-addon2"
                    @click.prevent="methods.onSearch"
                  >
                    <i class="fa fa-search"></i>
                  </button>
                </div>
              </form>
            </div> 
            -->

            <!-- 分类列表 -->
            <div class="sr-txt-title">
              <h2 class="sr-txt-h2">Product Groups</h2>
            </div>
            <ul class="sr-side-proGroup-list">
              <template
                v-for="(item, index) in productCategoryTreeList"
                :key="index"
              >
                <template v-if="item.children && item.children.length > 0">
                  <li class="sr-side-proGroup-rightSpace">
                    <a
                      :title="$wordpressDecodeHTML(item.name)"
                      @click="changeCategory(item.id)"
                    >
                      {{ $wordpressDecodeHTML(item.name) }}
                      <i class="fa-solid fa-angle-right"> </i>
                    </a>
                    <ol class="sr-side-proGroup-sublist">
                      <template
                        v-for="(child, index) in item.children"
                        :key="index"
                      >
                        <li>
                          <a
                            :title="$wordpressDecodeHTML(child.name)"
                            @click="changeCategory(child.id)"
                          >
                            {{ $wordpressDecodeHTML(child.name) }}
                          </a>
                        </li>
                      </template>
                    </ol>
                  </li>
                </template>
                <template v-else>
                  <li>
                    <a
                      :title="$wordpressDecodeHTML(item.name)"
                      @click="changeCategory(item.id)"
                    >
                      {{ $wordpressDecodeHTML(item.name) }}
                    </a>
                  </li>
                </template>
              </template>
            </ul>
          </div>
        </div>
        <div class="col-md-8">
          <div class="row row-cols-1 row-cols-md-3 g-5">
            <template v-for="(item, index) in result.list" :key="index">
              <div class="col">
                <div class="bg-light shadow product-card">
                  <a-image
                    height="20vh"
                    width="100%"
                    :src="
                      $getImgUrlFromMediaById(item.featured_media_src_url)
                        ? $getImgUrlFromMediaById(item.featured_media_src_url)
                        : require('@/assets/image/blank-profile-picture-973460_640.png')
                    "
                    fallback=""
                  />
                  <!-- <img
                  :src="
                    $getImgUrlFromMediaById(item.featured_media_src_url)
                      ? $getImgUrlFromMediaById(item.featured_media_src_url)
                      : require('@/assets/image/blank-profile-picture-973460_640.png')
                  "
                  class="img-fluid"
                  alt=""
                /> -->
                  <div class="product-card-body" @click="jumpDetail(item.id)">
                    <h3>{{ $wordpressDecodeHTML(item.title.rendered) }}</h3>
                  </div>
                </div>
              </div>
            </template>
          </div>
          <!-- 分页 -->
          <div class="row" style="margin-top: 30px">
            <div class="col-12 d-flex justify-content-center">
              <a-pagination
                v-model:current="params.page"
                v-model:pageSize="params.per_page"
                :total="result.total"
                show-less-items
                @change="onPageChange"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

<script setup>
import { getArticleList, getCategoryList, toTree } from "@/api/index";

import {
  reactive,
  toRefs,
  onBeforeMount,
  onMounted,
  getCurrentInstance,
  computed,
  onActivated,
} from "vue";

const { proxy } = getCurrentInstance();

const data = reactive({
  productCategoryList: computed(() => proxy.$store.getters.productCategoryList),
  params: {
    page: 1,
    per_page: 12,
    categories: 41,
    search: "",
    // search: computed(() => (proxy.$route.query.keyword ? proxy.$route.query.keyword : "")),
  },
  result: {
    list: [],
    total: 0,
  },
  allCategoryList: computed(() => proxy.$store.getters.allCategoryList),
  productCategoryTreeList: computed(() => {
    if (proxy.$store.getters.allCategoryList == null) {
      return [];
    }
    var productCategoryTreeList = toTree(
      proxy.$store.getters.allCategoryList
    ).find((item) => item.id == 41);
    return productCategoryTreeList ? productCategoryTreeList.children : [];
  }),
});
const { productCategoryList, params, result, productCategoryTreeList } =
  toRefs(data);
onBeforeMount(() => {
  if (proxy.$route.params.id) {
    data.params.categories = proxy.$route.params.id;
  }
});
onMounted(() => {
  methods.getList();
});
// onActivated(() => {
//   console.log("onActivated");
//   // methods.getList();
// });
//
const methods = {
  getList() {
    getArticleList(data.params).then((res) => {
      // 获取总数
      let headers = res.headers;
      data.result.total = parseInt(headers["x-wp-total"]);
      //
      data.result.list = res.data;
    });
  },
  onPageChange(pageNumber) {
    data.params.page = pageNumber;
    methods.getList();
  },
  changeCategory(id) {
    data.params.page = 1;
    data.params.categories = id;
    methods.getList();
  },
  jumpDetail(id) {
    proxy.$router.push(`/product/detail/${id}`);
  },
  onSearch() {
    data.params.page = 1;
    methods.getList();
  },
};

const { getList, onPageChange, changeCategory, jumpDetail } = toRefs(methods);
</script>
<style lang="scss" scoped>
// 查询输入框
.search-form {
  form {
    position: relative;
  }

  form input[type="text"] {
    border-radius: 4px;
    font-size: 1rem;
    border: 1px solid #ddd;
    width: 100%;
    padding: 0.5rem 0.5rem;
  }

  button {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    border: 0;
    font-size: 1rem;
    padding: 0 15px;
    margin: -1px;
    background: #68a4c4;
    color: #fff;
    transition: 0.3s;
    border-radius: 0 4px 4px 0;
    line-height: 0;
    border: 1px solid #ddd;
  }
}

.sr-sidebar {
  padding: 20px 20px;
  width: 80%;

  .sr-txt-title {
    margin-bottom: 20px;
  }

  .sr-txt-h2 {
    font-size: 18px;
    font-weight: bold;
    display: inline-block;
    vertical-align: middle;
    word-break: break-word;
  }

  ul,
  ol {
    margin: 0;
    padding: 0;
  }

  .sr-side-proGroup-list {
    li {
      position: relative;

      a {
        line-height: 21px;
        padding: 10px 0;
        color: #000;
        font-size: 14px;
        text-decoration: none;
        display: block;
        overflow-wrap: break-word;
        word-wrap: break-word;
      }

      .icon-lock {
        margin-top: -2px;
        color: #888;
      }
    }
  }

  .sr-side-proGroup-list li:hover {
    background: #e6ecf2;
  }
  .sr-side-proGroup-list li:hover > .sr-side-proGroup-sublist {
    display: block;
  }

  .sr-side-proGroup-list li.selected {
    background: #e6ecf2;
  }
  .sr-side-proGroup-list li.sr-side-proGroup-rightSpace {
    position: relative;
  }
  .sr-side-proGroup-list li.sr-side-proGroup-rightSpace > a {
    padding-right: 56px;
  }
  .sr-side-proGroup-list li.sr-side-proGroup-rightSpace i {
    position: absolute;
    right: 30px;
    top: 50%;
    transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -o-transform: translateY(-50%);
  }
  .sr-side-proGroup-more {
    margin-top: 20px;
  }
  .sr-side-proGroup-sublist {
    display: none;
    position: absolute;
    left: 100%;
    top: 0;
    margin-top: -11px;
    border: 1px solid #ced3d9;
    background: #fff;
    z-index: 99;
    padding: 10px 0;
    box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.2);
  }
  .sr-side-proGroup-sublist li a {
    padding: 10px 20px;
    white-space: nowrap;
  }
  .sr-side-proGroup-sublist li.sr-side-proGroup-rightSpace > a {
    padding-right: 46px;
  }
  .sr-side-proGroup-sublist li.sr-side-proGroup-rightSpace i {
    right: 20px;
  }
}

section.product {
  padding: 40px 0;

  #category {
    padding: 0;
    margin: 0 0 35px 0;
    list-style: none;
    text-align: center;
  }

  #category li:hover,
  #category li.filter-active {
    border-color: #68a4c4;
    color: #68a4c4;
  }

  #category li {
    cursor: pointer;
    margin: 0 12px 5px 12px;
    display: inline-block;
    padding: 0 4px 6px 4px;
    font-size: 1rem;
    font-weight: 500;
    line-height: 20px;
    color: #444;
    transition: all 0.3s ease-in-out;
    border-bottom: 2px solid #fff;
    font-family: "Roboto", sans-serif;
  }

  .product-card {
    padding: 20px 20px 0 20px;
    border-radius: 10px;

    .product-card-body {
      padding: 10px;
      h3 {
        font-size: 1rem;
        font-weight: bold;
        text-align: center;

        &:hover {
          cursor: pointer;
        }
      }
    }
  }

  .portfolio-item {
    background: #1e4356;
    overflow: hidden;
    min-height: 200px;
    position: relative;
    border-radius: 4px;
    margin: 0 0 30px 0;

    img {
      transition: all 0.3s ease-in-out;
    }

    .portfolio-info {
      opacity: 0;
      position: absolute;
      transition: all 0.3s linear;
      text-align: center;
      top: 10%;
      left: 0;
      right: 0;

      h3 {
        font-size: 22px;
        color: #fff;
        font-weight: bold;
      }
    }
  }

  .portfolio-item:hover img {
    opacity: 0.6;
    transform: scale(1.1);
  }
  .portfolio-item:hover .portfolio-info {
    opacity: 1;
    top: calc(50% - 30px);
  }
}
</style>
